<template>
	<div class="app-container calendar-list-container">
		<div class="filter-container">
			<!--搜索条件-->
			<el-form :inline="true" class="demo-form-inline">
				<el-form-item>
					<el-button type="primary" @click="addModel">
						<i class="el-icon-plus"></i> 添加机型</el-button>
				</el-form-item>
			</el-form>
		</div>
        <!--数据列表-->
		<el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" stripe style="width: 100%">
			<el-table-column prop="id" label="ID" width="150">
			</el-table-column>
			<el-table-column label="封面图片" width="150">
                <template slot-scope="scope">
					<img :src="scope.row.cover" style="max-width: 50%;">
				</template>
			</el-table-column>
			<el-table-column prop="phoneType" label="机型" width="150">
			</el-table-column>
			<el-table-column label="开售时间" width="180">
				<template slot-scope="scope">
					<i class="el-icon-time"></i>
					<span style="margin-left: 10px">{{ scope.row.saleTime }}</span>
				</template>
			</el-table-column>
			<el-table-column label="状态" width="150">
				<template slot-scope="scope">
                    <el-tag v-if="scope.row.status == 0">待售</el-tag>
                    <el-tag size="success" v-else-if="scope.row.status == 1">开售</el-tag>
                    <el-tag size="danger" v-else-if="scope.row.status == 2">已删除</el-tag>
                    <el-tag size="info" v-else-if="scope.row.status == 3">下架</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="sortNo" label="排序" width="150">
			</el-table-column>
			<el-table-column label="操作" min-width="150">
				<template slot-scope="scope">
					<el-button size="mini" plain type="danger" icon="el-icon-delete" @click="regionDelete(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
        <div class="pagination-container" style="text-align: center; margin-top: 30px;">
			<el-pagination :current-page="page.offset" :total="page.total" layout="prev, pager, next" @current-change="handleCurrentChange">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'complexTable',
		data() {
			return {
                listLoading: true,
                page: {
					pageSize: 10,
					offset: 1,
					total: null
				},
				list: []
			}
		},
		methods: {
			addModel() {
				console.log(1)
            },
            regionDelete() {

            },
            handleCurrentChange() {
                this.page.offset = val
				this.fetchData()
            },
            fetchData() { // 请求表格数据接口
                return new Promise((resolve, reject) => {
                    let data = {
						offset: this.page.offset,
						pageSize: this.page.pageSize
					}
                    this.listLoading = true
                    this.$axios({
                        url: '/reservephone/admin/PhoneType/index.json',
                        method: 'post',
                        data: this.$qs.stringify(data)
                    }).then((res) => {
                        this.listLoading = false

                        if (res.status === true || res.status === 'true') {
                            this.list = res.data.rows
                            this.page.total = res.data.total
                            resolve(res)
                        }
                    }).catch(() => {
                        this.listLoading = false
                        reject(err)
                    })
                })
			}
		},
		created() {
            this.fetchData()
		}
	}

</script>
